<template>
  <view class="logout-layout">
		<my-header title="账号注销"></my-header>
    <my-content class="content" :default-padding-top="40">
      <view class="tip">
        本平台在此特别提醒您，账号注销是不可恢复的操作，请您确认是否需要注销，及是否已妥善处理与本账号相关的所有服务、商品等问题，账号注销后您将无法通过本账号登陆或使用本平台的全部服务，包括售后服务。
      </view>
      <view class="box">
        <view>在您提交注销前，请先确认以下信息:</view>
        <view>1.您仅可注销您本人申请的账号;</view>
        <view>2.账号处于正常使用状态，无被盗风险;</view>
        <view>3.账号无任何纠纷，包括投诉举报或被投诉举报;</view>
        <view>4.账号没有未完成或存在争议的服务;</view>
        <view class="weight">5.账号内无未完成订单，包括待发货订单、售后处理中的订单;</view>
        <view class="weight">6.账户仓库内无已购买但未开启的盲盒、通过开启盲盒获取但未提货或兑换为金币的物品;</view>
        <view class="weight">
          7.如账号内有未使用的金币或其他虚拟权益等，账号注销申请的提交视为您已放弃其全部权益，注销后不得向本平台要求恢复;
        </view>
        <view>8.账号已解除与其他产品、网站授权登陆或绑定关系。</view>
        <view class="line">账号注销将会对您产生如下影响:</view>
        <view>1.您将无法使用该账号登陆且无法恢复;</view>
        <view class="weight">2.您的账号中的未使用的金币、虚拟权益等将作废且无法恢复;</view>
        <view>3.您将无法使用该账号或使用本平台的全部服务，包括售后服务;</view>
        <view>4.您的个人信息 (包括但不限于用户名、头像、交易记录等)将被删除或按照法律要求作匿名化处理，不可找回;</view>
        <view>
          5.账号注销后您与我们曾签署过的相关用户协议、其他权利义务性文件等相应终止
          (但我们与您之间已丝定继续生效的或法律法规另有规定除外)。
        </view>
        <view class="line">请您注意:</view>
        <view>
          1.如果您的账号被他人投诉、被国家机关调查或者正仲裁程序中，本平台有权自行决定是否终处于诉讼、止您的账号注销流程而无需另行得到您的同意。
        </view>
        <view>2.注销尊耀潮玩账号并不代表您的账号注销前的所有行为和相关责任得到豁免和减免。</view>
      </view>

      <view class="bottom">
        <view class="agree_box" @click="changeAgree()">
          <image
            mode="heightFix"
            v-if="agreeStatus"
            class="agree_icon"
            src="https://www.dingxians.cn/upload/images/common/selected.png"
          ></image>
          <image mode="heightFix" v-else class="agree_icon" src="https://www.dingxians.cn/upload/images/common/unselected.png"></image>
          <view class="agree_title">我已知晓注销行为不可恢复，且自愿放弃所有</view>
        </view>
        <view class="group">
          <view class="btn confirm btn-primary" @click="submit()">继续注销</view>
          <view class="btn btn-primary" @click="back()">暂不注销</view>
        </view>
      </view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'
export default {
  components: {
  },
  data() {
    return {
      agreeStatus: false,
    }
  },
  onLoad(option) {},
  onShow() {},

  methods: {
    back() {
      uni.navigateBack()
    },
    changeAgree() {
      this.agreeStatus = !this.agreeStatus
    },
    submit() {
      if (!this.agreeStatus) {
        this.show('请勾选且同意注销')
        return
      }
      uni.showModal({
        title: '温馨提示',
        content: `账号一经注销无法撤回！请谨慎操作！`,
        confirmText: '确定注销',
        success: (result) => {
          if (result.confirm) {
            api.users
              .off()
              .then((res) => {
                if (res.code === 200) {
                  this.show('注销成功')
                  uni.removeStorageSync('user_id')
                  uni.removeStorageSync('avatar')
                  uni.removeStorageSync('nickname')
                  uni.removeStorageSync('mobile')
                  uni.removeStorageSync('token')
                  setTimeout(() => {
                    uni.switchTab({
                      url: '/pages/index/index',
                    })
                  }, 500)
                }
              })
              .catch((error) => {
                console.log(error)
              })
          } else if (result.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },

    confirm() {},
  },
}
</script>

<style lang="scss" scoped>
.logout-layout {
  height: 100vh;
  background: url("https://www.dingxians.cn/upload/images/common/bg.png") 100% / 100%;
}
.content {
	height: 100vh;
	padding: 40rpx;
	color: white;
  overflow-y: scroll;
}
.header {
  text-align: center;
  font-size: 24rpx;
  color: red;
  margin: 30rpx 0;
}
.tip {
  margin-bottom: 30rpx;
}
.box {
  font-size: 30rpx;
  padding-bottom: 200rpx;
  .weight {
    font-weight: bold;
  }
  .line {
    margin-top: 20rpx;
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200rpx;
  background-color: #000;
  display: flex;
  flex-direction: column;
  .agree_box {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    margin: 20rpx 0;
    .agree_icon {
      height: 30rpx;
      margin-right: 10rpx;
    }
    .agree_title {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .btn {
      width: 276rpx;
      height: 84rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      &.confirm {
        filter: grayscale(1);
      }
    }
  }
}
</style>
